<template>
  <div>
    <v-header></v-header>
    <div class="wrap">
      <div>
        <img src="./img/orange.png" alt="" />
      </div>
      <van-cell-group inset>
        <van-field
        label="手机号"
          center
          clearable
          placeholder="手机号"
          v-model="phone"
        ></van-field>
        <van-field
        label="昵称"
          center
          clearable
          placeholder="昵称"
          v-model="nickname"
        ></van-field>

        <van-field
        label="密码"
          center
          clearable
          placeholder="请输入密码"
          v-model="password"
          type="password"
        >
       
        </van-field>
      </van-cell-group>
      <button class="btn" @click="btn">注册</button>
      <button class="btn2" @click="$router.replace('/login')">去登录</button>
    </div>
  </div>
</template>

<script>
// 导入 axios 函数
import { getRegister } from "@/request/api.js";
import {Toast} from 'vant'
export default {
  data() {
    return {
      phone:'',
      nickname:'',
      password:'',
    };
  },
  methods: {
    async btn() {
      let obj = { 
        phone:this.phone, 
        nickname:this.nickname,
         password:this.password };
         let getRegisterRes = await getRegister(obj)
         if(getRegisterRes.data.code == 200){
           Toast.success('注册成功，请登录')
         }
      // console.log(getRegisterRes);
    },
  },
};
</script>

<style scoped>
input {
  outline: none;
  border: none;
  border-bottom: 1px solid #ccc;
}
.btn {
  outline: none;
  border: none;
  background-color: #ccc;
  color: white;
  margin-top: 0.3rem;
  width: 75vw;
  height: 0.4rem;
  line-height: 0.4rem;
  border-radius: 0.2rem;
  background-color: green;
}
.btn2 {
  margin-top: 0.03rem;
  outline: none;
  border: none;
  background-color: #ccc;
  color: white;
  width: 75vw;
  height: 0.4rem;
  line-height: 0.4rem;
  background-color: tomato;
  border-radius: 0.2rem;
}
.wrap {
  width: 90vw;
  position: absolute;
  top: 35%;
  left: 5vw;
  text-align: center;
  /* border: 1px solid red; */
}
img {
  margin-bottom: 0.6rem;
}
.van-field {
  width: 75vw;
}
</style>